{% extends "layouts/base.html" %}

{% block title %} Dashboard {% endblock %} 

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <div class="pcoded-content">
        <div class="pcoded-inner-content">
            <!-- [ breadcrumb ] start -->

            <!-- [ breadcrumb ] end -->
            <div class="main-body">
                <div class="page-wrapper">
                    <!-- [ Main Content ] start -->
                    <div class="row">
                        <div class='col-md-3'>
                            <div class="card">
                                <div class="card-block">
                                    <div class="row d-flex align-items-center">
                                        <div class="col-auto">
                                            <i class="fas feather icon-clipboard f-40 text-c-blue "></i>
                                        </div>
                                        <div class="col">
                                            <h3 class="f-w-300">{{ rent_amount }}</h3>
                                            <span class="d-block text-uppercase">
                                                <a href="rentals_table">
                                                TOTAL Sales
                                                </a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- Count Members -->
                        <div class='col-md-3'>
                            <div class="card">
                                <div class="card-block">
                                    <div class="row d-flex align-items-center">
                                        <div class="col-auto">
                                            <i class="fas fa-user-friends f-40 " style="color:coral"></i>
                                        </div>
                                        <div class="col">
                                            <h3 class="f-w-300">{{ designer_cnt }}</h3>
                                            <span class="d-block text-uppercase">
                                                <a href="designers_table">
                                                TOTAL DESIGNERS
                                                </a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Count Categories -->
                        <div class='col-md-3'>
                            <div class="card">
                                <div class="card-block">
                                    <div class="row d-flex align-items-center">
                                        <div class="col-auto">
                                            <i class="fas feather icon-briefcase f-40 text-c-purple"></i>
                                        </div>
                                        <div class="col">
                                            <h3 class="f-w-300">{{ bag_cnt }}</h3>
                                            <span class="d-block text-uppercase">
                                                <a href="bags_table">
                                                TOTAL BAGS
                                                </a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Count Publishers -->
                        <div class='col-md-3'>                    
                            <div class="card">
                                <div class="card-block">
                                    <div class="row d-flex align-items-center">
                                        <div class="col-auto">
                                            <i class="fas fa-user-friends f-40 " style="color:coral"></i>                             
                                        </div>
                                        <div class="col">
                                            <h3 class="f-w-300">{{ customer_cnt }}</h3>
                                            <span class="d-block text-uppercase">
                                                <a href="customers_table">
                                                TOTAL CUSTOMERS
                                                </a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--[ Recent Users ] start-->
                        <div class="col-xl-8 col-md-6">
                            <div class="card Recent-Users">
                                <div class="card-header">
                                    <h5>Recent Users</h5>
                                </div>
                                <div class="card-block px-0 py-3">
                                    <div class="table-responsive">
                                        <table class="table table-hover">
                                            <tbody>
                                            {% for cus in cus_obj %}
                                                <tr class="unread">
                                                    <td>
                                                        <img class="rounded-circle" style="width:40px;" 
                                                            src={% if cus.gender == "female" %}
                                                                "/static/assets/images/user/avatar-1.jpg" 
                                                                {% else %}
                                                                "/static/assets/images/user/avatar-2.jpg"
                                                                {% endif %} 
                                                            alt="activity-user">
                                                    </td>
                                                    <td>
                                                        <h6 class="mb-1">{{ cus.first_name }} {{cus.last_name}}</h6>
                                                        <p class="m-0">{{ cus.email }}</p>
                                                    </td>
                                                    <td>
                                                        <h6 class="text-muted">
                                                            <i class="fas fa-circle text-c-green f-10 m-r-15"></i>
                                                            {{ cus.phone }}
                                                        </h6>
                                                    </td>
                                                    <td>
                                                        <a href="#!" class="label theme-bg2 text-white f-12">
                                                            Reject
                                                        </a>
                                                        <a href="#!" class="label theme-bg text-white f-12">
                                                            Approve
                                                        </a>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--[ Recent Users ] end-->

                        <!-- [ statistics year chart ] start -->
                        <div class="col-xl-4 col-md-6">
                            <div class="card card-event">
                                <div class="card-block">
                                    <div class="row align-items-center justify-content-center">
                                        <div class="col">
                                            <h5 class="m-0">Upcoming Event</h5>
                                        </div>
                                        <div class="col-auto">
                                            <label class="label theme-bg2 text-white f-14 f-w-400 float-right">34%</label>
                                        </div>
                                    </div>
                                    <h2 class="mt-3 f-w-300">45<sub class="text-muted f-14">Competitors</sub></h2>
                                    <h6 class="text-muted mt-4 mb-0">You can participate in event </h6>
                                    <i class="fab fa-angellist text-c-purple f-50"></i>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-block border-bottom">
                                    <div class="row d-flex align-items-center">
                                        <div class="col-auto">
                                            <i class="feather icon-zap f-30 text-c-green"></i>
                                        </div>
                                        <div class="col">
                                            <h3 class="f-w-300">235</h3>
                                            <span class="d-block text-uppercase">TOTAL IDEAS</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-block">
                                    <div class="row d-flex align-items-center">
                                        <div class="col-auto">
                                            <i class="feather icon-map-pin f-30 text-c-blue"></i>
                                        </div>
                                        <div class="col">
                                            <h3 class="f-w-300">26</h3>
                                            <span class="d-block text-uppercase">TOTAL LOCATIONS</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- [ Main Content ] end -->
                </div>
            </div>
        </div>
    </div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}
